<!-- 分页组件
    父组件传了一个pagingDatas对象过来
 -->
<template>
     <div class="paging">
        <el-pagination v-model:currentPage="_page" v-model:page-size="_limit"
            :page-sizes="[10,50,100,150,200]" :small="small" :disabled="disabled" background
            layout="total, sizes, prev, pager, next, jumper" :total="total"/>
    </div>
</template>
<script lang="ts" setup>
import { ref, watch, computed } from "vue";
const small = ref(false)//是否使用小型分页样式
const disabled = ref(false)//是否禁用分页
//通过defineProps()方法接收传过来的数据供分页使用
const props = defineProps({
    page: { type: Number, required: true },
    limit: { type: Number, required: true },
    total: { type: Number, required: true }
})
const _page = ref(props.page)
const _limit = ref(props.limit)
//通过defineEmits()方法将自定义事件以及参数传到父组件
const emit = defineEmits<{(e: 'pageChange', pageData: TypePaGing): void}>()
 //总条数除以条数
let pageMax = computed(() => Math.ceil(props.total / _limit.value)) 
//同时监听页码和条数
watch([_page, _limit], () => {
    if (_page.value <= pageMax.value) {
        emit('pageChange', { _page: _page.value, _limit: _limit.value })//将两个参数传到父组件
    }
})
</script>
<style scoped lang="less">
.paging {
    margin-top: 15px;
    margin-bottom: 18px;
    margin-left: 5px;
}
</style>